import { Component, OnInit, ViewChild } from '@angular/core';
import { TreeComponent, TreeNode } from '@iux/live';

@Component({
  selector: 'app-demo5',
  templateUrl: './demo5.component.html',
  styles: [
    `
      .tree-container {
        box-sizing: content-box;
        width: 3.6rem;
        padding: 0.16rem;
        border: 0.01rem solid #d9d9d9;
      }
      .selection {
        margin-bottom: 0.08rem;
        font-size: 0.16rem;
        line-height: 0.24rem;
      }
      .selection span:nth-of-type(n + 1) {
        padding-right: 0.08rem;
      }
    `,
  ],
})
export class Demo5Component implements OnInit {
  data: TreeNode[];
  selection: TreeNode[];

  @ViewChild(TreeComponent, { static: false }) lvTree: TreeComponent;

  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = [
      {
        label: 'Documents',
        disabled: true,
        children: [
          {
            label: 'Expenses.doc',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word',
        children: [
          {
            label: 'Expenses.doc',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Pictures',
        children: [
          {
            label: 'logo.png',
            isLeaf: true,
          },
          {
            label: 'banner.pnd',
            isLeaf: true,
          },
        ],
      },
    ];
  }

  selectionChange(event) {
    console.log('selection:', event);
  }

  clearSelection() {
    this.selection = null;
  }
}
